<template>
    <el-dropdown trigger="click" class="treeDropdown" ref="dropdown">
        <span class="el-dropdown-link"><p>{{text}}</p><i class="el-icon-arrow-down el-icon--right elIconRight"></i></span>
        <el-dropdown-menu slot="dropdown" :style="{'width':'auto', 'max-width': maxWidth + 'px' }" class="dropdown-tree">
            <div class="companytreeBox">
                <el-dropdown-item>
                    <common-table :data="data"
                                  @selection-change="checkboxChanged"
                                  :columns="columns"
                                  v-loading="false"
                                  @rowClick="rowClick"
                    >
                    </common-table>
                </el-dropdown-item>
            </div>
            <div class="common-drop-button"><el-button class="defaultBtn" @click.native="ChoseOK">确定</el-button></div>
        </el-dropdown-menu>
    </el-dropdown>
</template>
<script>

    export default {

        data() {
            return {
                text: '请选择',
                selectedNode: null
            }
        },
        mounted() {
            if (!this.defaultText || this.defaultText.length == 0) {
//                if (this.showColumnName) {
//                    if(this.data && this.data.length > 0) {
//                        this.text = this.data[0][this.showColumnName];
//                        this.selectedNode = this.data[0];
//                    }
//                } else if (this.columns && this.columns.length > 0) {
//                    if(this.data && this.data.length > 0) {
//                        this.text = this.data[0][0];
//                        this.selectedNode = this.data[0];
//                    }
//                } else {
//                    this.text = '';
//                }
            } else {
                this.text = this.defaultText;
            }
        },
        created: function () {
            console.log("text : " + this.text);
        },
        methods: {
            handleMenuItemClick(row, instance) {
                console.log(row)
//                this.$emit('command', command, instance);
                this.selectedNode = row;
                this.text = row.data.name;
            },
            ChoseOK() {
                this.$emit('selected', this.selectedNode ? this.selectedNode : null);
                if (this.selectedNode) {
                    if (this.showColumnName) {
                        this.text = this.selectedNode[this.showColumnName];
                    } else if (this.columns && this.columns.length > 0) {
                        this.text = this.selectedNode[this.columns[0].fieldName]
                    }
                }
                this.$refs.dropdown.hide();
            },
            rowClick(record, column, event) {
                console.log(event);
                this.selectedNode = record;
                event.stopPropagation();
                /* if (this.showColumnName) {
                    this.text = record[this.showColumnName];
                } else if (this.columns && this.columns.length > 0) {
                    this.text = record[this.columns[0].fieldName]
                } else {
                    this.text = '';
                }*/
//                this.$refs.dropdown.show();
            },
            checkboxChanged() {
                this.$emit('selected', this.selectedNode);
                this.$refs.dropdown.hide();
            }
        },
        props: {
            data: Array,
            defaultText: String,
            trigger: {
                type: String,
                default: 'hover'
            },
            type: String,
            size: {
                type: String,
                default: ''
            },
            splitButton: Boolean,
            hideOnClick: {
                type: Boolean,
                default: false
            },
            placement: {
                type: String,
                default: 'bottom-end'
            },
            visibleArrow: {
                default: true
            },
            showTimeout: {
                type: Number,
                default: 250
            },
            hideTimeout: {
                type: Number,
                default: 150
            },
            showColumnName: {
                type: String,
            },
            maxWidth: {
                type: Number,
                default: 500
            },
            columns: Array, // 普通表格需要展示的列
//            style: String
        },
    }
</script>
